<template>
    <div id="Header">
        <Row>
            <Col span="4">
                <!--logo-->
                <div class="logo">
                    <a href="/" style="width:210px;height:110px">
					    <img :src="logoUrl" class="w-100">
					<!--logo 图-->
				    </a>
                </div>
            </Col>

            <Col span="5">
                <!--电话-->
                <div class="hot-service">
					<i></i>

					<div class="hot-service-con border-box">
						<span class="hot-service-number">0758-5522988</span>
					</div>
				</div>
            </Col>

            <Col span="12">
               <!--搜索-->
               <Search></Search>
            </Col>

            <Col span="3">
                <!--购物车-->
                <div class="index-cart border-box" id="hd-my-cart">
					<a href="/Cart/cart.html">
						<div class="c-n fl">
							<i class="cart-icon"></i>
							<span>我的购物车</span>
							<i class="cart-square"></i>

						</div>
					</a>
				</div>
            </Col>

        </Row>
    </div>
</template>

<script>
import Search from '../search/Search'
export default {
    name:"Header",
    data(){
        return{
            logoUrl:require('@/assets/logo.png')
        }
    },
    components:{
        Search
    }
}
</script>

<style lang="scss" scoped>
#Header{
    height: 120px;
    width: 1200px;
    margin: 0 auto;
}
.logo{
    width: 200px;
    height: 100px;
}
.w-100 {
    width: 100%;
    height: 100%;
}
.hot-service {
    min-width: 200px;
    margin: 35px 0 0 20px;
    font-size: 0;
}
.hot-service>i {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(~@/assets/images/home/hot-service.png) no-repeat;
    margin: 0 15px 0 0;
    vertical-align: top;
}
.hot-service-con {
    display: inline-block;
    height: 100%;
    vertical-align: top;
}
.hot-service-number {
    color: #000738;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    height: 30px;
}
.index-cart {
    width: 138px;
    height: 40px;
    border-color: #ddd;
    margin: 30px 55px 0 0;
    background-color: #fdfdfd;
    border: 1px solid #ccc;
}
.index-cart .c-n {
    width: 136px;
    height: 38px;
    background-color: #fdfdfd;
}
.index-cart .cart-icon {
    width: 22px;
    height: 21px;
    float: left;
    margin: 9px 8px 0 10px;
    background: url(~@/assets/images/home/cart.png) no-repeat;
}
.index-cart .c-n span {
    margin-left: 0;
    font-size: 14px;
    color: #666;
    line-height: 40px;
}
</style>